import React from 'react';

interface NodePanelProps {
  onAddNode: (type: string, label: string) => void;
}

const NodePanel: React.FC<NodePanelProps> = ({ onAddNode }) => {
  const nodeTypes = [
    { 
      type: 'inputNode', 
      label: '输入节点', 
      description: '接收用户输入或系统数据',
      color: 'var(--node-input-color)'
    },
    { 
      type: 'aiNode', 
      label: 'AI模型', 
      description: '集成不同AI模型能力',
      color: 'var(--node-ai-color)'
    },
    { 
      type: 'processorNode', 
      label: '处理器', 
      description: '处理数据转换或业务逻辑',
      color: 'var(--node-processor-color)'
    },
    { 
      type: 'outputNode', 
      label: '输出节点', 
      description: '将结果输出到界面或其他系统',
      color: 'var(--node-output-color)'
    },
  ];

  return (
    <div className="node-panel" style={{ width: '250px' }}>
      <h3>节点面板</h3>
      <div>
        {nodeTypes.map((node) => (
          <div
            key={node.type}
            className="node-item"
            style={{ borderLeft: `4px solid ${node.color}` }}
            draggable
            onDragStart={(e) => {
              e.dataTransfer.setData('application/reactflow', node.type);
              e.dataTransfer.effectAllowed = 'move';
            }}
            onClick={() => onAddNode(node.type, node.label)}
          >
            <div className="node-item-title">{node.label}</div>
            <div className="node-item-desc">{node.description}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f0f4f8', borderRadius: '6px' }}>
        <div style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '5px' }}>提示</div>
        <div style={{ fontSize: '12px', color: '#555' }}>
          点击节点添加到画布，或拖拽到指定位置。点击已有节点可配置属性。
        </div>
      </div>
    </div>
  );
};

export default NodePanel;
